<template>
  <view class="smz_wrap">
    <view class="uCharts_box">
      <view class="ub_bg">
        <view class="qiun-charts">
          <view class="name">考勤人数</view>
          <canvas canvas-id="canvas" id="canvas" class="charts"></canvas>
        </view>
      </view>
    </view>
    <view class="Statistics">
      <view class="Statistics_top">
        <text>考勤统计</text>
        <view>查看详细信息</view>
      </view>
      <view class="Percent_box">
        <view class="cardWorkers">
          <view class="text">今日考勤</view>
          <view class="progress">
            <em class="sorll blue" :style="{width:smzData.cardPercent * 100 + '%'}" ></em>
          </view>
          <view class="num">{{smzData.cardWorkers}}</view>
        </view>
        <view class="yesterdayCard">
          <view class="text">昨日考勤</view>
          <view class="progress">
            <em class="sorll blue" :style="{width:smzData.yesterdayPercent * 100 + '%'}"></em>
          </view>
          <view class="num">{{smzData.yesterdayCard}}</view>
        </view>
        <view class="nowInWorkers">
          <view class="text">已在线</view>
          <view class="progress">
            <em class="sorll green" :style="{width:smzData.nowInPercent * 100 + '%'}"></em>
          </view>
          <view class="num">{{smzData.nowInWorkers}}</view>
        </view>
        <view class="notINWorkers">
          <view class="text">未在线</view>
          <view class="progress">
            <em class="sorll orange" :style="{width:smzData.notINPercent * 100 + '%'}"></em>
          </view>
          <view class="num">{{smzData.notINWorkers}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uCharts from "@/utils/u-charts.js";
export default {
  props: {
    smzData: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
    };
  },
  mounted() {
    this.getServerData();
  },
  methods: {
    getServerData() {
      var chartData = {
        series: [
          {
            name: "考勤人数",
            data: this.smzData.cardPercent,
            color: "#56a6ff",
            num: this.smzData.cardWorkers
          }
        ]
      };
      console.log(chartData);
      this.showRing("canvas", chartData);
    },
    showRing(canvasId, chartData) {
      new uCharts({
        $this: this,
        canvasId: canvasId,
        type: "arcbar",
        fontSize: 11,
        legend: { show: false },
        background: "#FFFFFF",
        pixelRatio: 1,
        series: chartData.series,
        animation: true,
        width: uni.upx2px(200),
        height: uni.upx2px(200),
        dataLabel: true,
        title: {
          name: chartData.series[0].num ? chartData.series[0].num : "0",
          color: chartData.series[0].color,
          fontSize: 22,
          offsetY: -5
        },
        extra: {
          arcbar: {
            type: "default",
            width: 5
          }
        }
      });
    },
    touchRing(e) {
      canvaRing.showToolTip(e, {
        format: function(item) {
          return item.name + ":" + item.data;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.blue {
  background: #56a6ff;
}
.green {
  background: #1abb69;
}
.orange {
  background: #ee7373;
}
.smz_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
  background: #fff;
  border-radius: 10rpx;
  width: 100%;
  height: 100%;
  .Statistics {
    width: calc(750rpx - 320rpx);
    height: 100%;
    padding-right: 30rpx;
    .Percent_box {
      .yesterdayCard,
      .nowInWorkers,
      .notINWorkers,
      .cardWorkers {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;
        .text {
          font-size: 22rpx;
          font-weight: 600;
          color: rgba(144, 144, 144, 1);
          width: 170rpx;
        }
        .progress {
          width: 100%;
          height: 14rpx;
          //border: 1rpx solid #56a6ff;
          border-radius: 7rpx;
          .sorll {
            height: 12rpx;
            border-radius: 6rpx;
          }
        }
        .num {
          font-size: 20rpx;
          color: rgba(144, 144, 144, 1);
          text-align: right;
          width: 80rpx;
        }
      }
      .yesterdayCard{
          margin-bottom: 32rpx;
      }
    }
    .Statistics_top {
      padding-top: 32rpx;
      padding-bottom: 32rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text {
        font-size: 26rpx;
        font-weight: 600;
        color: rgba(62, 62, 62, 1);
      }
      view {
        width: 142rpx;
        line-height: 38rpx;
        text-align: center;
        border: 1px solid rgba(86, 166, 255, 1);
        border-radius: 10rpx;
        font-size: 18rpx;
        color: rgba(86, 166, 255, 1);
      }
    }
  }
  .uCharts_box {
    width: 320rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .ub_bg {
      width: 240rpx;
      height: 240rpx;
      background: #f1f6fa;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      .qiun-charts {
        width: 220rpx;
        height: 220rpx;
        background: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .name {
          position: absolute;
          bottom: 28rpx;
          color: #909090;
          width: 82rpx;
          line-height: 33rpx;
          border: 1px solid rgba(86, 166, 255, 1);
          border-radius: 16rpx;
          text-align: center;
          z-index: 2;
          font-size: 16rpx;
        }
        .charts {
          position: absolutes;
          width: 200upx;
          height: 200upx;
          background-color: #ffffff;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>